<template>
	<view class="detail-block">
		<view @click="onDetailBlock">
			<view class="dtail-header">
				<view class="header-info">
					<image :src="detail.avatar" class="detail-img" mode=""></image>
					<view class="user-info">
						<text>{{ detail.nickname }}</text>
						<text class="user-time">{{$u.timeFrom(detail.createTime, 'yyyy年mm月dd日')}}</text>
					</view>
				</view>
				<view class="header-fire">
					<image src="../../../static/header/icon_fire_active.png" mode=""></image>
					<text>{{ detail.vitalityValue }}</text>
				</view>
			</view>
			<u-read-more show-height="300" close-text="展开" text-indent="0" color="#fed034">
				<view class="detail-content">
					{{ detail.bubbleContent || '' }}
				</view>
			</u-read-more>
			<view class="detail-imgList" v-if="detail.bubbleImgUrlList.length > 0">
				<view class="imgList">
					<image v-for="(img, index) in detail.bubbleImgUrlList" :key="index" :src="img" mode="aspectFill" class="imgItem" v-show="index <= 2"></image>
				</view>
				<text class="imgNum" v-if="detail.bubbleImgUrlList.length > 3">共{{ detail.bubbleImgUrlList.length }}张图</text>
			</view>
			<view class="swiper-tag">
				<u-tag shape="circle" v-if="detail.spaceName" :text="detail.spaceName" bg-color="#FFFAD3" border-color="#FFFAD3" color="#FF7B02" />
				<u-tag shape="circle" v-if="detail.accessRightsDesc" :text="detail.accessRightsDesc" bg-color="#FFFAD3" border-color="#FFFAD3" color="#FF7B02" />
			</view>
			<view class="swiper-bottom">
				<button class="swiper-option" @click.stop="onShare" open-type="share">
					<u-icon :name="iconLook" :size="40"></u-icon>
					<view class="grid-text">{{ detail.shareCount }}</view>
				</button>
				<view class="swiper-option" @click.stop="onComment">
					<u-icon :name="iconBubbles" :size="40"></u-icon>
					<view class="grid-text">{{ detail.commentCount }}</view>
				</view>
				<view class="swiper-option" @click.stop="onSupport">
					<u-icon :name="isActive ? iconFireActive : iconFire" :size="40"></u-icon>
					<view class="grid-text">{{ detail.likeCount }}</view>
				</view>
			</view>
		</view>
		
		<u-modal
		    class="delete-container"
		    v-model="showLogin"
			title="登录提示"
		    content="请确认是否授权登录账号？"
		    confirm-text="立即登录"
			confirm-color="#FED034"
		    cancel-text="暂不登录"
		    :show-cancel-button="true"
		    @confirm="login"
		    @cancel="showLogin = false"
		></u-modal>
		<u-modal
		    class="delete-container"
		    v-model="showCoin"
		    content="您的可用金币数量不足，无法给泡泡点赞！"
		    confirm-text="好的"
			confirm-color="#FED034"
		    @confirm="showCoin = false"
		></u-modal>
		
		<u-popup v-model="clockStatus" width="640rpx" mode="center" border-radius="32" closeable close-icon-size="40">
			<view class="space">
				<view class="space_img">
					<image src="../../../static/header/bg_support.png" mode=""></image>
				</view>
				<view class="space_head">
					点赞成功！
				</view>
				<view class="space_tips">
					您的金币-1，泡泡活力值+1
				</view>
				<view class="replay-btn">
					<button type="default" class="recharge_coin" @click="clockStatus = false">好的</button>
				</view>
			</view>
		</u-popup>
		
		<u-popup v-model="showReplay" mode="center" closeable width="640rpx" border-radius="16" close-icon-size="40">
			<replay-model v-if="showReplay" :bubbleId="bubbleId" @resetPapaComment="resetPapaComment" :commentDetail="commentDetail" @close="showReplay = false"></replay-model>
		</u-popup>
	</view>
</template>

<script>
	import UserLogin from '@/common/js/login'
	import { mapGetters, mapState } from 'vuex'
	import replayModel from '../../papaw/modal/replay.vue'
	export default {
		components: { replayModel },
		props: {
			item: {
				type: Object,
				default() {
					return {}
				}
			}
		},
		mixins: [UserLogin],
		data() {
			return {
				iconLook: require('../../../static/header/icon_share_black.png'),
				iconBubbles: require('../../../static/header/icon_message_black.png'),
				iconFire: require('../../../static/header/icon_support_black.png'),
				iconFireActive: require('../../../static/header/icon_support_active.png'),
				isActive: false,
				showLogin: false,
				clockStatus: false,
				showCoin: false,
				detail: {},
				supportStatus: false,
				showReplay: false, // 评论
				bubbleId: null,
				commentDetail: { id: 0 }
			};
		},
		computed: {
			...mapState(['isLoginStatus'])
		},
		mounted() {
			this.detail = this.item
			this.bubbleId = this.item.id
			this.detail.createTime = +new Date(this.item.createTime)
		},
		watch: {
			clockStatus() {
				this.$emit('updateStatus', this.clockStatus)
			}
		},
		methods: {
			login() {
			    this.getUserInfo(() => {
					this.isLogin = true
			        this.$u.toast('登录成功');
			    })
			},
			onDetailBlock() {
				console.log(this.isLoginStatus)
				// 查看泡泡详情
				if(!this.isLoginStatus) {
					this.showLogin = true
					return
				}
				this.$u.route('/pages/papaw/papaDetail', {
					id: this.detail.id
				})
			},
			async onComment() {
				// 评论
				if(!this.isLoginStatus) {
					this.showLogin = true
					return
				}
				if(this.currentUser.availableGoldCoinCount <= 0) {
					this.showCoin = true
					return
				}
				// NRHRxUYqatLvxf8fUeBaxVZf20XlsinoMROD4FSGXEs
				let _id = ['NRHRxUYqatLvxf8fUeBaxVZf20XlsinoMROD4FSGXEs']
				
				uni.requestSubscribeMessage({
				    tmplIds: _id,
				    success: (res) => {
				        let templateId = _id.filter(i => res[i] === 'accept');
				        if( templateId.length ) {
							this.showReplay = true
				        }
				    },
				    fail: (err) => {
				        console.log(err,'requestSubscribeMessage err')
				        if (err.errCode === 20004) {
				            // 20004:用户关闭了主开关，无法进行订阅,引导开启
				        }
				    }
				})
				
			},
			async onShare() {
				if(!this.isLoginStatus) {
					this.showLogin = true
					return
				}
				// 分享好友
				uni.share({
					provider: "weixin",  
					scene: 'WXSceneSession',    // WXSceneSession/WXSenceTimeline/WXSceneFavorite  
					imageUrl: 'https://www.hesongzhineng.com/img/javafile/20210821103944-dc3a824a-bb88-4781-834d-83d7911129c3.png',  
					type: 5,
					title: '好友邀请你来一起玩',
					// summary: spaceDetail.spaceBriefIntroduction,
					miniProgram: {
						id: 'wx2959a675e140ffec',
						path: '/pages/tabbar/home?businessParamType=51',
						type: '1'
					},
					success: (res) => {  
						console.log("weixin == success:" + JSON.stringify(res));  
					},  
					fail: (err) => {  
						console.log("weixin == fail:" + JSON.stringify(err));  
					}  
				})
			},
			async resetPapaComment() {
				this.detail.commentCount += 1
			},
			async onSupport() {
				// 点赞
				if(!this.isLoginStatus) {
					this.showLogin = true
					return
				}
				if(this.currentUser.availableGoldCoinCount <= 0) {
					this.showCoin = true
					return
				}
				if(this.supportStatus) {
					return
				}
				this.supportStatus = true
				
				uni.showLoading();
				await this.$u.post('/paopao/mini/space/likePaoPao', { bubbleId: this.detail.id }).then((data) => {
					uni.hideLoading()
					this.supportStatus = false
					if(data && data.status == -1) { return }
					this.clockStatus = true
					this.isActive = true
					this.detail.likeCount = this.detail.likeCount + 1
					this.$forceUpdate()
					this.getReUserInfo()
				});
			}
		}
	}
</script>

<style lang="less" scoped>
@import url("../../../common/css/var.less");
.detail-block {
	width: 100%;
	background: #FFFFFF;
	box-shadow: 0rpx 20rpx 60rpx rgba(0, 0, 0, 0.05);
	opacity: 1;
	border-radius: 32rpx;
	padding: 32rpx 32rpx 0;
	margin-bottom: 24rpx;
	
	.dtail-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: @tText;
	}
	
	.header-info {
		display: flex;
		align-items: center;
		flex-basis: 75%;
		image {
			width: 96rpx;
			height: 96rpx;
			border-radius: 50%;
			overflow: hidden;
			margin-right: 24rpx;
		}
		.user-info {
			display: flex;
			align-items: flex-start;
			flex-direction: column;
			padding-top: 6rpx;
			font-size: 32rpx;
			line-height: 48rpx;
			color: @mText;
			flex-basis: 75%;
			.user-time {
				padding-top: 8rpx;
				font-size: 24rpx;
				line-height: 40rpx;
				color: @tText;
			}
		}
	}
	.header-fire {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		flex-basis: 25%;
		font-size: 28rpx;
		line-height: 32rpx;
		image {
			width: 32rpx;
			height: 32rpx;
			margin-right: 8rpx;
		}
	}
	.detail-content {
		padding-top: 24rpx;
		color: @mText;
		font-size: 32rpx;
	}
	.swiper-tag {
		padding-top: 20rpx;
		u-tag {
			font-size: 24rpx;
			margin-right: 16rpx;
		}
	}
	.swiper-bottom {
		padding: 0 32rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.swiper-option {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 32rpx 0;
		color: @tText;
		font-size: 28rpx;
		u-icon {
			width: 40rpx;
			height: 40rpx;
			margin-right: 8rpx;
		}
		.grid-text {
			line-height: 40rpx;
		}
	}
	.detail-imgList {
		position: relative;
		padding-top: 24rpx;
		.imgList {
			display: flex;
			align-items: center;
		}
		.imgItem {
			width: 192rpx;
			height: 192rpx;
			background: #FFFFFF;
			opacity: 1;
			border-radius: 32rpx;
			margin-right: 24rpx;
			&:nth-child(3n) {
				margin-right: 0;
			}
		}
		.imgNum {
			position: absolute;
			right: 16rpx;
			bottom: 16rpx;
			color: #FFFFFF;
			font-size: 24rpx;
			padding: 4rpx 12rpx;
			background: @mText;
			border-radius: 24rpx;
		}
	}
	
	.space {
		padding: 48rpx;
		text-align: center;
	}
	.space_img {
		width: 320rpx;
		height: 320rpx;
		margin: 0 auto;
		image {
			width: 100%;
			height: 100%;
		}
	}
	.space_head {
		font-size: 40rpx;
		color: @mText;
		padding-top: 48rpx;
	}
	.space_tips {
		padding-top: 32rpx;
		font-size: 32rpx;
		color: @tText;
	}
	.replay-btn {
		padding-top: 80rpx;
		background-color: #FFFFFF;
		.recharge_coin {
			line-height: 96rpx;
			background: @mColor !important;
			box-shadow: 0 16rpx 48rpx rgba(0, 0, 0, 0.06);
			border-radius: 48rpx;
			color: @mText;
			font-size: 36rpx;
		}
	}
}
</style>
